<template>
  <f7-page class="login-page">
    <div class="logo-box">
      <img src="../assets/logo.png" alt="">
    </div>
   <div class="container-box">
     <custom-input2 label="账号" placeholder="请输入账号" v-model="formItems.login_phone"></custom-input2>
     <custom-input2 type="password" label="密码" placeholder="请输入密码" v-model="formItems.login_pwd"></custom-input2>
     <f7-button fill @click="handleLogin">登录</f7-button>
     <div class="link-inner">
       <f7-link @click="forgetPwdModal = true">找回密码</f7-link>
       <f7-link href="/register/">注册</f7-link>
     </div>

     <custom-modal v-model="forgetPwdModal">
       <f7-button fill @click="toForgetPwd(1)">找回登录密码</f7-button>
       <f7-button fill @click="toForgetPwd(2)">找回交易密码</f7-button>
     </custom-modal>
   </div>
  </f7-page>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        forgetPwdModal: false,
        formItems: {
          login_phone: '', //17640121667
          login_pwd: '' //a123456
        }
      }
    },
    methods: {
      handleLogin() {
        this.$toast.loading({
          message: '登录中...'
        });
        this.$store.dispatch('Login', this.formItems).then(res => {
          this.$store.dispatch('GetInfo').then(info => {
            if(info.user.activation=== '0') {
              this.$dialog.confirm({
                title: '提示',
                message: '当前账号未激活，是否前往激活',
                confirmButtonText: '去激活'
              }).then(() => {
                this.$f7.views.main.router.navigate('/active/');
                // on confirm
              }).catch(() => {
                // on cancel
              });
            }
          });
          this.$toast.clear()
        })
      },
      toForgetPwd(type) {
        this.forgetPwdModal = false;
        this.$f7router.navigate(`/forget-pwd/?type=${type}`);
      }
    }
  }
</script>

<style scoped lang="scss">
  .login-page {
    background: url("../assets/home-bg.png") no-repeat center top;
    background-size: 100% 100%;

    .container-box {
      padding: 40px;
      .custom-input2 {
        margin-bottom: 30px;
      }
      .button {
        margin-top: 30px;
      }
      .link-inner {
        display: flex;
        padding-top: 20px;
        justify-content: space-between;
      }
    }
  }
</style>